import React, { useState } from 'react';
import styles from '@/pages/Organization/EmployeeManage/components/SupervisorProfile/index.less';
import Animate from 'rc-animate';
import PropTypes from 'prop-types';
import { Icon } from 'antd';

/**
 * 主管概况分组
 */
const SupervisorProfileGroup = props => {
    const { title, children } = props;
    const [collapsed, setCollapsed] = useState(false);
    const handleToggleCollapse = () => {
        setCollapsed(!collapsed);
    };
    return (
        <div className={styles.supervisorProfileGroup}>
            <div className={styles.supervisorProfileGroupHeader}>
                <div className={styles.supervisorProfileGroupTitle}>{title}</div>
                <a className={styles.collapsed} onClick={handleToggleCollapse}>
                    {collapsed ? '展开' : '收起'}
                    {collapsed ? <Icon type="caret-down" /> : <Icon type="caret-up" />}
                </a>
            </div>
            <Animate transitionName="fade">{!collapsed ? children : null}</Animate>
        </div>
    );
};

// prop
SupervisorProfileGroup.propTypes = {
    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired
};
SupervisorProfileGroup.displayName = 'SupervisorProfileGroup';

export default SupervisorProfileGroup;
